<template>
    <div class="depart_update_container">
        <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="部门名" prop="userId">
                <el-input type="text" v-model="ruleForm.departName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门领导">
                    <el-select v-model="ruleForm.leaderId">
                        <el-option label=" " value=" "></el-option>
                        <el-option v-for="item in leaderList" :key="item.id" :label="item.name"
                            :value="item.id">{{ item.name }}</el-option>
                    </el-select>
                </el-form-item>
            <el-form-item label="上班时间" prop="pass">
                <el-time-select v-model="ruleForm.workonTime" :picker-options="{
                        start: '08:30',
                        step: '00:15',
                        end: '18:30'
                    }" placeholder="选择时间">
                </el-time-select>
            </el-form-item>
            <el-form-item label="下班时间" prop="pass">
                <el-time-select v-model="ruleForm.workoffTime" :picker-options="{
                        start: '08:30',
                        step: '00:15',
                        end: '18:30'
                    }" placeholder="选择时间">
                </el-time-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleForm)">确定</el-button>
                <el-button @click="cancer">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { addOrUpdateDepart, getDepartLeader } from '@/api/api'

export default {
  data () {
    return {
      ruleForm: {
        departName: this.$route.query.departName,
        leaderId: null,
        workonTime: '',
        workoffTime: ''
      },
      leaderList: []
    }
  },
  methods: {
    submitForm (formName) {
      const params = {
        departId: this.$route.query.departId,
        departName: formName.departName,
        departLeaderId: formName.leaderId,
        workonTime: formName.workonTime,
        workoffTime: formName.workoffTime
      }
      addOrUpdateDepart(params).then(res => {
        if (res.data.code === 200) {
          this.$router.back()
          this.$message('修改成功')
        }
      })
    },
    cancer () {
      this.$router.back()
    }
  },
  mounted () {
    getDepartLeader().then(res => {
      console.log(res.data)
      this.leaderList = res.data.data
    })
  }
}

</script>

<style lang="scss" scoped>
.depart_update_container {
    width: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.el-form-item__label {
    margin-bottom: 10px;
}
</style>
